import React from 'react'
import { Button, Checkbox, Form, Input } from 'antd';
import './index.css'
import axios  from '../../api/api';
import { useNavigate } from 'react-router-dom';
function Index() {
    const nav=useNavigate()
    const onFinish = async(values) => {
        console.log('Success:', values);
        const {account,password}=values
       const res=await axios.post('/api/login',{account,password})
       console.log(res.headers )
       localStorage.setItem('token',res.data.token)
       localStorage.setItem('icon',res.data.username)
       nav('/home')
       alert('登录成功')
      };
      const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
      };
  return (
    <div className='one'>
   
<div className='one1'>
    <div className='tp'></div>
    <h2 style={{marginLeft:'100px'}}>文章发布系统</h2>
       <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 700,marginRight:'60px' }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <div className='one11'>
    <Form.Item
    style={{marginLeft:'-30px'}}
    label="账号"
    name="account"
    rules={[{ required: true, message: 'Please input your username!' }]}
  >
    <Input style={{width:'260px'}} className='kuang1'/>
  </Form.Item>

    </div>
   <div className='one11'>
   <Form.Item
   style={{marginLeft:'-30px'}}
   label="密码"
   name="password"
   rules={[{ required: true, message: 'Please input your password!' }]}
 >
   <Input.Password style={{width:'260px'}} className='kuang1'/>
 </Form.Item>
   </div>
   <div className='one11'>
   <Form.Item
   style={{marginLeft:'-15px'}}
   label="验证码"
   name="password"
 
 >
   <Input style={{width:'190px',marginLeft:'-10px',float:'left'}} className='kuang1'/>
   <div className='fk' style={{float:'left'}}>
    <p style={{fontSize:'15px',marginLeft:'12px',marginTop:'0px'}}>NjE7</p>
   </div>
 </Form.Item>
   </div>

   

    <Form.Item label={null}>
      <Button type="primary" htmlType="submit" style={{width:'260px',marginLeft:'-50px'}}>
        登录
      </Button>
    </Form.Item>
    <Form.Item label={null}>
      <Button type="primary" htmlType="submit" style={{width:'260px',marginLeft:'-50px',background:'white',color:'black'}}>
        取消
      </Button>
    </Form.Item>
  </Form>
  </div>
    </div>
  )
}

export default Index
